<template>
  <div class="app-container customer-div">
    <div>
      <el-button @click="showorderForm('add',null)" type="primary" size="small">新增商品</el-button>
    </div>
    <div class="table-container">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
                  label="商品名称"
                  min-width="150"
                  align="center">
            <template slot-scope="scope">
              {{scope.row.goodsName}}/{{scope.row.goodsSn}}
            </template>
          </el-table-column>
          <el-table-column  label="询价有效期" min-width="150" align="center">
            <template slot-scope="scope">
              {{scope.row.validMinutes}}分钟
            </template>
          </el-table-column>

          <el-table-column  label="状态" min-width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.status == 1 ? '启用' : '禁用'}}
            </template>
          </el-table-column>

          <el-table-column
            min-width="150"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="showorderForm('edit',scope.row)">修改
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="confirmItem(scope.row)">{{ scope.row.status == 1 ? '禁用' : '启用' }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        :page-sizes="[10,15,20]"
        :total="count">
      </el-pagination>
    </div>


    <!--新增商品-->
    <el-dialog
            :close-on-click-modal="false"
            title="新增商品"
            :visible.sync="dialogVisible"
            width="420px">
      <el-form :model="addForm" size="mini" label-width="120px" ref="addForm" :rules="rules">
        <el-form-item label="商品名称：" prop="kingGoodsId">
          <el-select
            @change="changeGoods(addForm.kingGoodsId)"
            size="small"
            v-model="addForm.kingGoodsId"
            filterable
            remote
            placeholder="请输入关键词"
            :remote-method="((val)=>{remoteMethod(val)})"
            :loading="goodsLoading">
            <el-option
              v-for="item in list"
              :key="item.kingGoodsId"
              :label="item | fifitem"
              :value="item.kingGoodsId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="询价有效期：" prop="validMinutes">
            <el-input-number controls-position="right" :min="0"  :precision="0" :controls="false" v-model="addForm.validMinutes" style="width:100px"></el-input-number> <span>分钟</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
    import { mapGetters } from 'vuex'
    import {
      getCrmGoodsList,
      getGoodsOrderList,
      goodsOrderCancel,
      inquiryTimeList,
      inquiryTimeSet
    } from "../../api/partner";
    const defaultListQuery={
      pageNum: 1,
      pageSize: 10,
    };

    const defaultAddForm={
      "configId" : 0, //设置记录ID(0表示新增)
      "goodsName" : "",
      "goodsSn" : "",
      "kingGoodsId" : '',
      "validMinutes" : 30, //询价有效期(分钟)
      "status" : 1 //状态(1有效，2无效)
    };
    export default {
      name: "index",
      data(){
          return {
              creator:'',
              listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
              tableData: [],
              count: 0,
              listLoading: false,
              btnLoading:false,
              dialogVisible:false,
              rules:{
                kingGoodsId:[{required: true, message: '此项必填', trigger: 'change'},],
                validMinutes:[{required: true, message: '此项必填', trigger: 'change'},],
              },
            addForm:JSON.parse(JSON.stringify(defaultAddForm)),
            goodsLoading:false,
            list:[],
          }
      },
      computed: {
        ...mapGetters([
          'name',
          'mobile',
          'userId'
        ]),

      },
      created() {
        this.getList();
      },
      filters: {
        fifitem(item){
          return item.goodsName+'/'+item.goodsSn
        },
      },
      methods:{

        //启用/禁用
        confirmItem(item){
          let text = item.status == 1 ? '是否确认禁用？' : '是否确认启用？';
          this.$confirm(text, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            inquiryTimeSet({configId:item.configId,status:item.status == 1 ? 2 : 1}).then(()=>{
              this.getList();
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
            })

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        },

        //联想商品
        remoteMethod(key){
          this.goodsLoading = true;
          getCrmGoodsList({keyword:key}).then((res)=>{
            this.list = res;
            this.goodsLoading = false;
          }).catch(()=>{
            this.goodsLoading = false;
          })
        },

        //切换商品
        changeGoods(kingGoodsId){
          let c = {};
          c = this.list.find((el)=>{
            return el.kingGoodsId == kingGoodsId;
          });
          this.addForm.kingGoodsId = c.kingGoodsId;
          this.addForm.goodsName = c.goodsName;
          this.addForm.goodsSn = c.goodsSn;
        },

        //显示弹窗
        showorderForm(type,item){
          this.dialogVisible = true;
          if(type == 'add'){
            this.addForm = JSON.parse(JSON.stringify(defaultAddForm))
          }else{
            this.addForm.configId = item.configId;
            this.addForm.goodsName = item.goodsName;
            this.addForm.goodsSn = item.goodsSn;
            this.addForm.kingGoodsId = item.kingGoodsId;
            this.addForm.validMinutes = item.validMinutes;
            this.addForm.status = item.status;
            this.list = [];
            this.list.push({
                goodsName:item.goodsName,
                goodsSn:item.goodsSn,
                kingGoodsId:item.kingGoodsId
              })
          }
        },
        //关闭弹窗
        handleClose(){
          this.dialogVisible = false;
          this.btnLoading = false;
        },

        //确认新增商品
        handleConfirm(){
          this.$refs.addForm.validate((valid) => {
            if (valid) {
              this.btnLoading = true;
              inquiryTimeSet(this.addForm).then((res)=>{
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.btnLoading = false;
                this.handleClose();
                this.getList();
              }).catch(()=>{
                this.btnLoading = false;
              })
            }
          })

        },


        handleSizeChange(val){
          this.listQuery.pageNum = 1;
          this.listQuery.pageSize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.listQuery.pageNum = val;
          this.getList();
        },

        handleSearchList(){
          this.listQuery.pageNum = 1;
          this.getList();
        },

        //获取列表
        getList() {
          this.listLoading = true;
          let listQuery = JSON.parse(JSON.stringify(this.listQuery));
          inquiryTimeList(listQuery).then(response => {
            this.tableData = response.list;
            this.count = response.count;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          });
        },
      },
    }
</script>

<style scoped lang="scss">

</style>
